<template>
    <div>
        <div class="add-box">
            <el-button type="primary" @click="addUser">添加</el-button>
        </div>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="title" label="菜单名称" />
            <el-table-column prop="level" label="菜单级数" />
            <el-table-column prop="name" label="前端名称"></el-table-column>
            <el-table-column prop="icon" label="前端图标"></el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="hidden" label="是否显示">
                <template #default="scope">
                    <el-switch
                        v-model="scope.row.hidden"
                        :active-value="0"
                        :inactive-value="1"
                        @change="changeHandle(scope.row.id, scope.row.hidden)"
                    />
                    <!-- 是否显示 -->
                </template>
            </el-table-column>

            <el-table-column prop="" label="设置">
                <template #default="scope">
                    <el-button type="primary" @click="lookdown(scope.row.id)">查看下级</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="compile(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <ElConfigProvider :locale="zhCn">
            <el-pagination
                background
                v-model:currentPage="paramslist.pageNum"
                @size-change="pageSizeChagne"
                @current-change="currentChagne"
                v-model:page-size="paramslist.pageSize"
                layout="total,prev,sizes,prev, pager,next,jumper"
                :total="total"
            />
        </ElConfigProvider>

        <!-- 分页 -->
    </div>
</template>
<script setup lang="ts">
import { ElConfigProvider, ElMessage, FormInstance } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { user } from '@/api';
import { reactive, ref, toRefs } from 'vue';
import { fomatDate } from '@/utils/index';
import { useRouter } from 'vue-router';

const router = useRouter();

// const list2 = reactive([]);
const state = reactive<{
    list: inMenuList[];
    total: number;
}>({
    list: [],
    total: 0,
});
const paramslist = reactive<paramslist>({
    pageNum: 1,
    pageSize: 5,
    parentId: 0,
});
const { list, total } = toRefs(state);

const sentapi = () => {
    user.menulist(paramslist).then(res => {
        if (res.code === 200) {
            state.list = res.data.list;
            state.total = res.data.total;
            console.log('state.list', state.list);
            state.list.map(item => {
                if (item.level === 0) {
                    item.level = '一级';
                } else if (item.level === 1) {
                    item.level = '二级';
                }
            });
        }
    });
};
const addUser = () => {
    //添加
    router.push({ path: '/ums/addMenu' });
    console.log(paramslist.parentId);
};
//查看下级
const lookdown = (id: number) => {
    console.log(id);
    paramslist.parentId = id;
    console.log(paramslist);
    sentapi();
};
//编辑
const getmunsList = reactive([]);
const compile = (id: number) => {
    user.getidmumunsApi(id).then(res => {});
    router.push({ path: '/ums/addMenu', query: { id: id } });
    // console.log(id);
};

sentapi();
const pageSizeChagne = () => {
    sentapi();
};
const currentChagne = () => {
    sentapi();
};
//是否启用
const changeHandle = (hd: number, id: number) => {
    // console.log(1);
    user.changeshowApi(hd, id)

        .then(res => {
            if (res.code === 200) {
                console.log('成功');
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? 'success' : 'error',
                });
            }
        })
        .catch(err => {
            sentapi();
        });
};
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    .flex {
        display: flex;
        justify-content: space-between;
    }
}
.add-box {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
}
</style>
